<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性</title>
		<!-- 垂直方向对齐属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内元素的垂直居中
					    【文本和图片垂直居中（对齐）效果】
						 对齐分为四种：基线对齐，顶部对齐
						              居中对齐，底部对齐
						 元素种类：块元素，行元素，行内块元素
						特点	（行元素）	：独占一行，可设置宽高
						特点	（块元素）   ：一行内显示，不可设置宽高
						网页             ：元素之间嵌套生成
						行元素与块元素可以任意嵌套
						前提              ：设置宽高---行套块
						                           ---块元素  √
												   ---块套行  √ 
						前提            ：一行内显示 ---行套块  √
												    ---块套块 ×
													---块套行 √
													---行套行 √
		 -->
		 <style>
			 p im g:nth-child(1){
				 /* vertical-align: baseline 默认基线对齐
				 */
				vertical-align:baseline;
			 }
			 /*问题：派生选择器 ，特点：找后代 p img
			 */
				p im g:nth-child(1){
				 /* vertical-align: baseline 顶部对齐
				 */
				 vertical-align: top;
				 width:500px;
				 height:500px;
				 background: red; 
			 }
			 img.baseline{
				             vertical-align: baseline;
			 }
			 img.top{
			 				 vertical-align: baseline;
			 }
			 img.middle{
			 				 vertical-align: baseline;
			 }
			 img.bottom{
			 				 vertical-align: baseline;
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p,嵌套文字：图片叫什么名字
		                   文字后加img,设置宽高：25~100px
						   每个图片分别加：基线对齐，顶部对齐，居中对齐，底部对齐
		 -->
		 <h1>666</h1>
		 <p>花朵<img class="baseline" src="img/1.png" alt="花朵"width="100px";height="5px">基线对齐</p>
		 <p>落日<img class="top"      src="img/2.png" alt="落日"width="100px";height="5px">顶部对齐</p>
		 <p>海洋<img class="middle"   src="img/3.png" alt="海洋"width="100px";height="5px">居中对齐</p>
		 <p>油画<img class="bottom"   src="img/4.png" alt="油画"width="100px";height="5px">底部对齐</p>
		 <!-- css选择器--抓第一张图片......
		      思路：派生选择器：找后代+伪类选择器：添加效果【错误】
			  错误原因：html结构不符合派生特点：p包含4个img
			  伪类选择器，4个img需要在一个p中
		     p img:nth-child(1)
		 -->
	</body>
</html>